<template>
    <div>
        <el-tooltip :disabled="disabled" effect="dark" placement="right" >
            <h3 slot="content">无数据</h3>
            <p slot="content">无数据</p>

            <el-card class="box-card cardStyle" :body-style="{ padding: '0px' }">

                <el-image class="imgStyle" :src="require('@/assets/food_1.jpg')" fit="cover"></el-image>

                <div class="tagStyle">今日一菜</div>

                <!-- 注：此处 e-image 添加点击事件会使滚动条消失，div作为覆盖层盖在上面完成点击事件--by hui  -->
                <div style="width: 210px;height: 210px;position: absolute;margin-top:-210px" @click="viewDetails"></div>

                <h3 class="h3Style" @click="viewDetails">1</h3>


                <p class="pStyle"><img class="iconStyle" src="../../../assets/good.png" width="18px">88</p>

                <!-- <el-avatar :size="50" src="../../../assets/001.png" style="border:3px solid #BBDDFF">
                <img src="../../../assets/001.png" />
            </el-avatar> -->
            </el-card>

        </el-tooltip>
        <DishesInfo ref="dinfo"></DishesInfo>
    </div>
</template>

<script>
    import DishesInfo from "../../share/util/DishesInfo"
    export default {
        name: 'TodayCard',
        data() {
            return {
                disabled: false,
                // url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                url:'../../../assets/food_1.jpg'
            }
        },
        components: {
            DishesInfo
        },
        methods: {
            viewDetails() {
                this.$refs.dinfo.DishesInfoVisible = true;
                // this.$refs.dinfo.menu={
                //     ishesImg: dishesImg,
                //     dishesName: dishesName,
                //     dishesIngredients: dishesIngredients,
                //     dishesStep: dishesStep,
                //     dishesTag: dishesTag,
                //     goodnum: goodnum
                // }
                //console.log(item.dishesName)
            },
        }
    }
</script>


<style scoped>
    .cardStyle {
        width: 210px;
        margin-top: 15px;
        /* margin-left: 30px; */
        float: left;
        /* box-shadow: 4px 4px 16px #8f8f8f; */
        /* box-shadow:6px 6px 10px rgb(151, 151, 151); */
    }

    .imgStyle {
        width: 210px;
        height: 210px;
    }

    .tagStyle {
        position: absolute;
        margin-left: 10px;
        margin-top: -200px;
        background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
        font-size: 13px;
        font-weight: 700;
        color: rgb(58, 58, 58);
        border-radius: 3px;
        padding: 2px 6px;
    }

    .h3Style {
        margin-top: 8px;
    }

    .pStyle {
        vertical-align: middle;
        font-size: 14px;
        font-weight: 500;
        color: #0090FF;
        margin-top: -5px;
    }

    .iconStyle {
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -3px;
    }
</style>